<template>
    <div>
      <City-Header ></City-Header> 
      <City-Search :city="city" ></City-Search>
      <City-List :city="city" :hot="cityhot" :letter="letter"></City-List>
      <CityAlph :city="city" @change="handleletterChange"></CityAlph>
    </div>
</template>
<script>
import axios from 'axios'
import CityHeader from './componets/header.vue'
import CitySearch from './componets/search.vue'
import CityList from './componets/list.vue'
import   CityAlph from './componets/alphgle.vue'
export default {
 name:'city' ,
 data () {
   return {
     city:{},
     cityhot:[],
     letter:''
   }
 },
 components:{
    CityHeader,
    CitySearch,
    CityList,
    CityAlph
 },
 methods:{
 getcity(){
   axios.get('/api/city.json')
   .then(this.getcityiucc)
 },
 getcityiucc(res){
  res=res.data
  if (res.ret && res.data) {
    const data=res.data
    this.city=data.cities
    this.cityhot=data.hotCities
  }
 },
 handleletterChange(letter){
 this.letter=letter
 }
 },
mounted () {
  this.getcity()
}
}
</script>
<style lang="stylus" scoped>

</style>

